<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>
          <span :class="titleIndex == 1 ? 'active' : ''" @click="titleIndex = 1"
            >邀请我的</span
          >
          <span :class="titleIndex == 2 ? 'active' : ''" @click="titleIndex = 2"
            >我申请的</span
          >
        </h1>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div v-if="titleIndex == 1" class="listContent1">
      <div class="item">
        <img class="head" src="../../assets/images/adver.jpg" />
        <div class="info">
          <p class="p1">大石头</p>
          <p class="p2">
            <span>15512345678</span>
            <span>2020.01.02 09:12</span>
          </p>
          <div class="div1">
            <div class="people">
              <span>引荐人：</span>
              <img src="../../assets/images/adver.jpg" />
              <span>二石头</span>
            </div>
            <p class="txt">
              申请说明：辣椒水开发建设看了就打发了圣诞节分厘收到反馈速度
            </p>
          </div>
          <div class="div2">
            <p class="left">申请加入【一二一】</p>
            <div class="right">
              <button type="button">拒绝</button>
              <button type="button" class="yellow">同意</button>
              <!-- <span>已拒绝</span> -->
              <!-- <span class="yellow">已同意</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="titleIndex == 2" class="listContent2">
      <div class="item">
        <p class="top">创建社群【蚂蚁金服麻小云社群】</p>
        <div class="bottom">
          <p class="left">2020.01.02 09:12</p>
          <p class="right">
            <span>待处理</span>
            <!-- <span class="yellow">已同意</span> -->
            <!-- <span class="red">已拒绝</span> -->
          </p>
        </div>
      </div>
      <div class="item">
        <p class="top">申请加入【一二一社群】</p>
        <div class="bottom">
          <p class="left">2020.01.02 09:12</p>
          <p class="right">
            <!-- <span>待处理</span> -->
            <span class="yellow">已同意</span>
            <!-- <span class="red">已拒绝</span> -->
          </p>
        </div>
      </div>
      <div class="item">
        <p class="top">邀请大石头加入【某某某某某】</p>
        <div class="bottom">
          <p class="left">2020.01.02 09:12</p>
          <p class="right">
            <!-- <span>待处理</span> -->
            <!-- <span class="yellow">已同意</span> -->
            <span class="red">已拒绝</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data: function() {
    return {
      titleIndex: 1
    };
  },
  mounted: function() {},
  methods: {}
};
</script>

<style scoped>
.fixHead .title h1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fixHead .title h1 span {
  font-size: 0.32rem;
  color: #999999;
  padding: 0 0.3rem;
  line-height: 0.88rem;
  height: 0.88rem;
  display: block;
}
.fixHead .title h1 .active {
  background: url(../../assets/images/mkf/infoBg.png) bottom center no-repeat;
  background-size: auto 0.16rem;
  color: #ffffff;
  background-position-y: 0.5rem;
}
</style>
